<route lang="json5">
{
  style: { navigationBarTitleText: 'Feedback' },
}
</route>

<template>
  <view class="feedback-container">
    <view class="feedback-card">
      <view class="card-header">
        <text class="title">Feedback for Scooter #{{ scooterId }}</text>
      </view>

      <view class="form">
        <view class="form-item">
          <text class="label">Issue Type</text>
          <wd-radio-group v-model="form.type">
            <wd-radio value="other">Minor Issue</wd-radio>
            <wd-radio value="damage">Damage</wd-radio>
            <wd-radio value="malfunction">Serious Malfunction</wd-radio>
          </wd-radio-group>
        </view>

        <view class="form-item">
          <text class="label">Description</text>
          <wd-textarea
            v-model="form.description"
            placeholder="Please describe the issue in detail"
            :maxlength="200"
            show-count
          />
        </view>
      </view>

      <view class="submit-section">
        <wd-button type="primary" block @click="handleSubmit" :loading="submitting">
          Submit
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { feedback } from '@/service/user'

const scooterId = ref('')
const rentalId = ref('') // 添加 rentalId
const submitting = ref(false)

const form = reactive({
  type: 'other',
  description: '',
})

// 根据类型获取评分
const getRatingByType = (type: string): number => {
  const ratings = {
    other: 1, // 轻微问题
    damage: 2, // 损坏
    malfunction: 3, // 严重故障
  }
  return ratings[type] || 1
}

const handleSubmit = async () => {
  if (!form.description.trim()) {
    uni.showToast({
      title: 'Please describe the issue',
      icon: 'none',
    })
    return
  }

  submitting.value = true
  try {
    await feedback(rentalId.value, getRatingByType(form.type), form.description)

    uni.showToast({
      title: 'Feedback submitted',
      icon: 'success',
    })

    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    uni.showToast({
      title: 'Failed to submit feedback',
      icon: 'none',
    })
  } finally {
    submitting.value = false
  }
}

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.$page?.options || {}

  if (options.scooterId) {
    scooterId.value = options.scooterId
  }
  if (options.rentalId) {
    // 添加 rentalId 获取
    rentalId.value = options.rentalId
  }
})
</script>

<style lang="scss">
.feedback-container {
  padding: 16px;
  min-height: 100vh;
  background: #f5f5f5;
}

.feedback-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  .card-header {
    margin-bottom: 24px;
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }

  .form-item {
    margin-bottom: 20px;

    .label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #666;
    }
  }

  .submit-section {
    margin-top: 32px;
  }
}
</style>
